<template name="mars-coupon">
	<view :style="$s.view_color">
		<view class="coupon-box" v-if="couponData.length>0">
			<!-- 优惠券中心	我的优惠券 -->
			<block v-if="type==='list'">
				<block v-for="(item,index) in couponData" :key="index">
					<view class="coupon-com" :class="item.status===0?'no-select':''">
						<view class="coupon-com-main" @click="jump(item)">
							<view class="coupon-com-main-left" v-if="item.discount_type===1">
								<text class="coupon-com-main-left-small">￥</text>
								<text class="coupon-com-main-left-strong">{{item.discount_money}}</text>
							</view>
							<view class="coupon-com-main-left" v-if="item.discount_type===2">
								<text class="coupon-com-main-left-strong">{{item.discount_rate}}</text>
								<text class="coupon-com-main-left-small">折</text>
							</view>
							<view :class="item.discount_type===2?'tag':'tag2'">{{item.discount_type_name}}</view>
							<view class="coupon-com-main-right">
								<view class="coupon-com-main-right-name">{{item.title}}</view>
								<view class="coupon-com-main-right-des">{{item.discount_text}} ( {{item.is_over==1?'可叠加':'不可叠加'}} )</view>
								<view class="coupon-com-main-right-des">[ {{item.use_text}} ]</view>
								<view class="coupon-com-main-right-des">有效期：{{item.term_type_name}}</view>
							</view>
							<view class="coupon-com-main-right-ex1" v-if="item.status===0">
								<text>不可用</text>
							</view>
						</view>
						<view class="coupon-com-footer" v-if="butShow">
							<view class="com-button">
								 <button class="my-but-primary" @click="receive(item)">领取优惠券</button>
							</view>
						</view>
						
					</view>
				</block>
			</block>
					
			<block v-if="type==='select'">
				<u-checkbox-group v-model="couponid" shape="circle" placement="column" :activeColor="$s.theme" @change="changeCoupon">
				<block v-for="(item,index) in couponData" :key="index">
					<view class="coupon-com" :class="couponid.indexOf(item.id)!==-1?'select':''" @click="insCoupon(item.id)">
						<view class="coupon-com-main radio-coupon">
							<view class="coupon-com-main-left" v-if="item.discount_type===1">
								<text class="coupon-com-main-left-small">￥</text>
								<text class="coupon-com-main-left-strong">{{item.discount_money}}</text>
							</view>
							<view class="coupon-com-main-left" v-if="item.discount_type===2">
								<text class="coupon-com-main-left-strong">{{item.discount_rate}}</text>
								<text class="coupon-com-main-left-small">折</text>
							</view>
							<view class="tag">{{item.discount_type_name}}</view>
							<view class="coupon-com-main-right">
								<view class="coupon-com-main-right-name">{{item.title}}</view>
								<view class="coupon-com-main-right-des">{{item.discount_text}} ( {{item.is_over==1?'可叠加':'不可叠加'}} )</view>
								<view class="coupon-com-main-right-des">[ {{item.use_text}} ]</view>
								<view class="coupon-com-main-right-des">有效期：{{item.term_type_name}}</view>
							</view>
							<view class="coupon-com-main-right-ex1">
								<u-checkbox :name="item.id" size="24" iconSize="22"></u-checkbox>
							</view>
						</view>
						<view class="coupon-com-footer"></view>
					</view>
				</block>
				</u-checkbox-group>
	<!-- 			<view class="bottom-box">
					
				</view> -->
			</block>
		</view>
		
		<view v-else>
			<u-empty text="暂无优惠券" icon="/static/images/empty/data.png"></u-empty>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	props: {
		type: {
			type: String,
			default: ''
		},
		list:{
			type:[Array,Object],
			default: {}
		},
		p_couponid:{			//默认选中的id
			type:[Array,Object],
			default:[-1],
		},
		butShow:{
			tyep:Boolean,
			default:true,
		}
	},
	data() {
		return {
			couponid:[],
		};
	},
	watch: {
		p_couponid:{
			handler (newVal) {
				this.couponid=newVal
			},
			deep: true,
			immediate: true,
		}
	},
	computed: {
		...mapState({
			config:state => state.$config,
			$s:state => state.$style,
		}),
		couponData(){
			return this.list || [];
		},
	},
	mounted(){
	},
	methods: {
		//点击券
		changeCoupon(e){
			this.couponid=this.formatCoupon(e);
			this.$emit('chang',this.couponid)
		},
		//选中插入优惠券ID
		insCoupon(id){
			let e=this.couponid;
			if(e.indexOf(id)!=-1){
				e.splice(e.indexOf(id),1)
			}else{
				e.push(id)
			}
			this.couponid=this.formatCoupon(e);
			this.$emit('chang',this.couponid)
		},
		//格式化选择优惠券的数组
		formatCoupon(e){
			//数组中是 [-1,2] 的格式
			if(e.indexOf(-1)!=-1 && e.length>0){
				e.splice(e.indexOf(-1),1)
			}else if (e === '' || (Array.isArray(e) && e.length === 0) || (Array.isArray(e) && e.length === 1 && e[0] === -1)) {
				e=[-1]
			}
			return e;
		},
		//领取优惠券或跳转
		jump(item){
			let id=item.coupon_id?item.coupon_id:item.id;
			this.$c.a('coupon/detail/index?id='+id);
		},
		//领取优惠券
		receive(item){
			if(this.butShow){
				this.$u.api.couponReceive({id:item.id}).then(res=>{
					this.$c.success('领取成功！')
				})
			}		
		},
	}
};
</script>

<style lang="scss">
@import "@/static/css/coupon.css";
</style>
